<template>
  <el-col :span="12">
    <div class="grid-content bg-purple">
      <slot></slot>
      <ICountUp class="num" :delay="delay" :endVal="data1" :options="options('', '','','')">
      </ICountUp>
      <div class="range">
        <!--el-icon-caret-left el-icon-caret-right el-icon-caret-bottom el-icon-caret-top-->
        <p v-if="data2>=0">
          <i class="el-icon-caret-top" :style="{color: 'red', fontSize: '20px',verticalAlign:'middle'}"></i>
          新增{{data2}}
        </p>
        <p v-else>
          <i class="el-icon-caret-bottom" :style="{color: '#67C23A', fontSize: '20px',verticalAlign:'middle'}"></i>
          减少{{data}}
        </p>
      </div>
    </div>
  </el-col>
</template>

<script>
  import ICountUp from 'vue-countup-v2'
  export default {
    data() {
      return {
        delay: 500,
        /*
         * countup.js的options封装
         * @params：
         * userEasing: 默认为true
         * userGrouping： 默认为true
         * separator： 数字间的分隔符，默认为没有空格符
         * decimal：小数
         * prefix: 数字前缀
         * suffix：数字后缀
         * */
        options(separator, decimal, prefix, suffix) {
          let option = new Object()
          option.userEasing = true
          option.userGrouping = true
          option.separator = separator
          option.decimal = decimal
          option.prefix = prefix
          option.suffix = suffix
          return option
        },
      }
    },
    props: {
      data1: 0,
      data2: 0
    },
    computed: {
      data() {
        if (this.data2 < 0) {
          return Math.abs(this.data2)
        }
      }
    },
    components: {
      ICountUp
    }
  }
</script>
<style scoped>
  /* @import url(); 引入css类 */


  .num {
    /* color: red; */
  }
</style>